<template>
  <div class="cesium-viewer-wapper">
    <div id="cesium-viewer" />
    <div class="tool-box-left-top">
      <p><button @click="onClick('Satellites')">遥感卫星</button></p>
      <p><button @click="onClick('beidou')">北斗卫星</button></p>
      <p><button @click="onClick('Vehicle')">地面车辆</button></p>
    </div>
    <viewerSettingSidebar :viewerSource="viewerSource" style="top:160px" />
    <GlobeRotater showTime startOnMount :viewerSource="viewerSource" />
    <MousePosition show :viewerSource="viewerSource"/>
  </div>
</template>

<script>
import { defineComponent, ref, watch } from 'vue';
import * as Cesium from '@cesiumjs';
import { G3V } from '@g3x';
import {MousePosition,viewerSettingSidebar,GlobeRotater} from '@g3x/g3v/ui';

const g3vOptions = {
  defaultViewRectangle: G3V.defaultViews.global.china.rectangle,
  viewers:[{
    dom: "cesium-viewer",
    name: "viewer1",
    title: "viewer#01",
    viewer:{
      imagery: { type: 'arcgisImagery', options: { brightness: 1, show: true } },
      imageryProvider: null,
      // terrain: { type: 'default', options: { requestVertexNormals: true, requestWaterMask: true } },
      terrainProvider: null,
      shadows: false,
    },
    layers:[
      { type: 'tdtIboMap', options: { brightness: 1, show: true } },
      { type: 'tdtImgAnno', options: { brightness: 1, show: true } },
      // { type: 'darkMask', options: { brightness: 1, alpha: 0.85 } },
      { type: 'graticule', options: { brightness: 1, show: false } }
    ],
    globe: {
      // depthTestAgainstTerrain: false,
      enableLighting: true //启用以太阳为光源的地球
    },
    navigation: {
      // defaultResetView: G3V.defaultViews.global.china.rectangle ,
      defaultResetView: null //flyHome
    },
    hideLayers: false,
  }],
};


export default defineComponent({
  name: 'satellites', // 扇形
  components: { MousePosition, GlobeRotater, viewerSettingSidebar },
  setup() {
    return {
    };
  },
  data() {
    return { g3v: null };
  },
  computed: {
    viewer() {
      return this.g3v && this.g3v.viewer$1;
    },
    viewerSource() {
      const { viewer } = this;
      return { viewer };
    }
  },
  watch: {},
  mounted() {
    this.initViewer();
  },
  unmounted() {
    this.g3v && this.g3v.destroy();
    this.g3v = null;
  },
  methods: {
    initViewer() {
      let vm = this;
      vm.g3v = new G3V(g3vOptions,()=>{
        vm.onViewerInited();
        vm.initEffects();
      });
    },
    onViewerInited() {},
    initEffects() {
      const viewer = this.viewer;
      this.onClick('Satellites');
      // viewer.camera.flyHome(3);
    },
    onClick(value) {
      const viewer = this.viewer;
      viewer.dataSources.removeAll(true)
      if (value === 'Satellites') {
        const url = '//zzgis.com/cdn/3d/czml/satellites.czml';
        viewer.dataSources.add(Cesium.CzmlDataSource.load(url));
        viewer.camera.flyHome(5);
      } else if (value === 'beidou') {
        const url = '//zzgis.com/cdn/3d/czml/satellite.czml';
        viewer.dataSources.add(Cesium.CzmlDataSource.load(url));
        viewer.camera.flyHome(5);
      } else if (value === 'Vehicle') {
        const url = '//zzgis.com/cdn/3d/czml/vehicle.czml';
        viewer.dataSources.add(Cesium.CzmlDataSource.load(url));
        viewer.scene.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(-116.52, 35.02, 95000),
          orientation: {
            heading: 6
          }
        });
      }
    }
  }
});
</script>

<style scoped lang="less">
.tool-box-left-top {
  display: flex;

  button {
    background-color: rgba(0, 0, 0, 0.75);
    border-color: rgba(0, 0, 0, 0);
    cursor: pointer;

    transition: all 500ms;

    &:hover {
      opacity: 0.75;
    }
  }
}
</style>
